<template>
  <div :class="currentPageClass">
    <div class="environent-mark" v-if="env === 'development'">{{envName}}</div>
    <mourning></mourning>
    <q-layout view="hhh lpr fff" class="admin-layout"
      @scroll="scrollTop = $event.position;">
      <q-header class="print-hide">
        <div class="header-inner full-width bg-primary">
          <q-toolbar class="admin-main-toolbar">
            <q-toolbar-title class="cursor-pointer" @click="$router.push('/')">
              <q-img class="logo" src="images/logo.svg"
                width="40px" height="40px"></q-img>
                人工智能互联互通开源评测平台
            </q-toolbar-title>

            <q-space></q-space>

            <q-btn flat class="user-profile-btn">
              <q-avatar>
                <e-icon :name="userAvatar" />
              </q-avatar>
              <span class="user-name ellipsis">
                {{userName}}
                <div class="date-label">{{new Date() | normalDate}}</div>
              </span>
              <e-icon class="user-profile-menu-icon"
                :name="ucMenuShown ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"></e-icon>
              <q-menu content-class="user-profile-menu" @input="ucMenuChanged">
                <q-list style="min-width: 191px">
                  <q-item>
                    <q-item-section>
                      <q-btn
                        class="logout-btn"
                        flat
                        :label="$t('LOGOUT')"
                        v-close-popup
                        @click="logoutClicked"
                      />
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-toolbar>
        </div>
      </q-header>

      <q-page-container>
        <q-page class="admin-page row q-pa-md">
          <div class="leveled-menu-wrapper">
            <leveled-menus :menus="menus" group="top"
              :showIcon="true" class="admin-menu col print-hide">
            </leveled-menus>
          </div>
          <div class="col admin-main-content-wrapper q-ml-md">
            <bread-crumbs
              v-if="showBreadCrumbs"
              class="admin-main-bread-crumbs print-hide q-mb-md"></bread-crumbs>
            <router-view class="admin-page-router-view" style="height: calc(100% - 60px);"/>
          </div>
          <!-- <sticky-messenger :top="scrollTop" :offset="260"></sticky-messenger> -->
        </q-page>
      </q-page-container>

      <q-footer class="row backend-footer bg-black">
        <div class="row full-width justify-center items-center">
          <div>人工智能互联互通开源评测平台后台管理</div>
          <div class="q-mx-md">© 2022-{{(new Date()).getFullYear()}}</div>
          <div class="cursor-pointer" @click="toICP">{{ICP}}</div>
        </div>
      </q-footer>
    </q-layout>
  </div>
</template>

<script>
import Vue from 'vue';
import mixins from 'eis-admin-mixins';
import store from 'eis-admin-passport/store';
import { canI } from '@/utils/api.js';

export default {
  name: 'WebLayout',
  mixins: [mixins.ObjectDataMixin],
  components: {
  },
  props: {
    Logout: {
      type: Function,
      default: () => {},
    },
  },
  meta: {
    title: '人工智能互联互通开源评测平台',
  },
  data() {
    return {
      darkMode: false,
      ucMenuShown: false,
      menus: [],
      scrollTop: 0,
      contactInfo: {},
      ICP: '京ICP备05013730号-51',
    };
  },
  created() {
    // footer info
    this.getRequest('portal/footer').then((d) => {
      const data = (d && d.data) || {};

      if (data && data.ICP) {
        this.ICP = data.ICP;
      }
    });

    document.getElementsByTagName('html')[0].style.fontSize = '';
  },
  computed: {
    env() {
      return process.env.env;
    },
    envName() {
      return this.$t(`env_${process.env.env}`);
    },
    showBreadCrumbs() {
      const hideBCRegs = [
        /^\/admin\/basic\/part\/[a-z]*$/g,
      ];

      for (let i = 0; i < hideBCRegs.length; i += 1) {
        if (hideBCRegs[i].test(this.$route.fullPath)) return false;
      }

      return true;
    },
    currentPageClass() {
      return `app-layout-root${this.$route.fullPath.replace(/\//g, '-')}`;
    },
    userName() {
      if (this.ctx.modules.passport.store.state.passport.user
        && this.ctx.modules.passport.store.state.passport.user.Name) {
        return this.ctx.modules.passport.store.state.passport.user.Name;
      }

      return '未完善信息用户';
    },
    userAvatar() {
      if (!this.ctx.modules.passport.store.state.passport.user) return '';

      if (this.ctx.modules.passport.store.state.passport.user.avatar) {
        return this.ctx.modules.passport.store.state.passport.user.avatar;
      }

      if (this.ctx.modules.passport.store.state.passport.user.role) {
        return `admin/${this.ctx.modules.passport.store.state.passport.user.role}`;
      }

      return 'admin/company';
    },
  },
  watch: {
    darkMode(mode) {
      this.$q.dark.set(mode);
    },
  },
  beforeRouteEnter(to, from, next) {
    canI('/api/系统后台').then((r) => {
      if (r) {
        if (to && to.fullPath !== '/admin/uc/info' && store.state.passport.user && store.state.passport.user.Status && store.state.passport.user.Status !== '1') {
          next('/admin/uc/info');
        } else {
          next();
        }
      } else {
        next('/');
      }
    });
  },
  beforeCreate() {
    // this.$i18n.locale = 'zh-cn';

    Vue.prototype.getRequest('/menu/menus', { category: '后台主菜单' }).then((d) => {
      if (d && d.msg === 'OK' && d.data.menus) {
        this.menus = d.data.menus;
      }
    });

    // Vue.prototype.getRequest('/portal/contactinfo').then((d) => {
    //   if (d && d.msg === 'OK' && d.data) {
    //     this.contactInfo = d.data;
    //   }
    // });
  },
  methods: {
    toPortal() {
      window.open('/', '_self');
    },
    ucMenuChanged(s) {
      this.ucMenuShown = s;
    },
    logoutClicked() {
      this.getModule('passport')
        .utils.logout()
        .then(() => {
          // clear info to store
          this.ctx.modules.passport.store.dispatch('passport/clearLoginStatus');
          this.$router.replace('/');
        });
    },
    showNotifyDialog(options, func, errFunc) {
      Vue.prototype.$MsgDialog({ type: '', ...options })
        .then(() => {
          if (func && typeof func === 'function') {
            func();
          }
        })
        .catch(errFunc || (() => {}));
    },
    toICP() {
      window.open('https://beian.miit.gov.cn');
    },
  },
  beforeDestroy() {
    this.$store.commit('app/SET_CRUMBS', undefined);
  },
};
</script>

<style lang="scss" scoped>
.environent-mark {
  position: absolute;
  left: -130px;
  top: -80px;
  height: 100px;
  width: 300px;

  font-size: 12px;
  line-height: 100px;
  text-align: center;
  padding-top: 40px;
  padding-right: 70px;
  background-color: #FF0000DD;
  color: white;
  transform: rotate(315deg);

  z-index: 9999999;
}
</style>

<style lang="sass" scoped>
.admin-layout
  position: absolute
  min-width: $contentMinWidth
  background: $bodyBackground
  .header-inner
    &>div
      max-width: $contentMaxWidth
      margin: 0 auto
  .admin-page
    min-width: $contentMinWidth
    max-width: $contentMaxWidth
    margin: 0 auto
    // .admin-menu
    //   margin-bottom: 6px
  .user-profile-menu-icon
    font-size: 16px
  .leveled-menu-wrapper
    min-width: 180px
  .menu-bottom
    .label
      font-weight: 700
    .phone,.email
      font-family: "FZZhengHeiS-B-GB"
      font-size: 12px

  .backend-footer
    height: 60px
</style>

<style lang="sass">
  .admin-footer .footer-inner > div
    max-width: $contentMaxWidth !important
</style>
